<template>
  <div class="purchase-return-container">
    <!-- 筛选区域 -->
    <div class="filter-section">
        <div class="header-left">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
      <div class="filter-item">
        <label>关键词</label>
        <input type="text" placeholder="请输入退货单号/产品名称" v-model="queryParams.keyword">
          </div>
      <div class="filter-item">
        <label>状态</label>
        <select v-model="queryParams.returnStatus">
          <option value="">全部</option>
          <option value="0">待退货</option>
          <option value="1">待寄出</option>
          <option value="2">已寄出</option>
          <option value="3">待收货</option>
        </select>
        </div>
      <div class="filter-buttons">
        <button class="btn-primary" @click="handleQuery">搜索</button>
        <button class="btn-secondary" @click="resetQuery">重置</button>
      </div>
      </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <table>
        <thead>
        <tr>
          <th><input type="checkbox" v-model="allSelected"></th>
          <th>退货单号</th>
          <th>产品名称</th>
          <th>规格</th>
          <th>分类</th>
          <th>单位</th>
          <th>供应商</th>
          <th>退货数量</th>
          <th>退货时间</th>
          <th>状态</th>
          <th>备注</th>
        </tr>
        </thead>
        <tbody>
          <tr v-if="loading">
            <td colspan="9" style="text-align: center; padding: 20px;">加载中...</td>
          </tr>
          <tr v-for="(item, index) in returnList" :key="index">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td class="link-style" @click="handleDetail(item)">{{ item.returnOrderNo || '-' }}</td>
            <td>
              <span class="link-style">{{ item.productName || '-' }}</span>&nbsp;
              <span class="link-style">{{ item.productCode || '-' }}</span>
            </td>
            <td>{{ item.specification || '-' }}</td>
            <td>{{ item.unitName || '-' }}</td>
            <td>{{ item.source || '-' }}</td>
            <td>
              <span class="link-style">{{ item.supplierName || '-' }}</span>&nbsp;
              <span class="link-style">{{ item.supplierCode || '-' }}</span>
            </td>
            <td>{{ item.returnQuantity || '-' }}</td>
            <td>{{ parseTime(item.returnTime, '{y}-{m}-{d}') || '-' }}</td>
            <td><span :class="getStatusClass(item.returnStatus)">{{ getStatusText(item.returnStatus) }}</span></td>
            <td>{{ item.remark || '-' }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 底部区域 -->
    <div class="footer-section">
      <div class="footer-left">
        <input type="checkbox" v-model="allSelected">
        <label>全选</label>
        <button class="btn-secondary" @click="handleExport">导出</button>
      </div>
      <div class="pagination">
        <button @click="onPageChange(queryParams.pageNum - 1)" :disabled="queryParams.pageNum === 1">&lt;</button>
        <button v-for="page in totalPages" :key="page" @click="onPageChange(page)" :class="{ active: queryParams.pageNum === page }">{{ page }}</button>
        <button @click="onPageChange(queryParams.pageNum + 1)" :disabled="queryParams.pageNum === totalPages">&gt;</button>
        <select v-model.number="queryParams.pageSize" @change="onPageSizeChange">
          <option value="5">5条/页</option>
          <option value="10">10条/页</option>
          <option value="20">20条/页</option>
          <option value="50">50条/页</option>
        </select>
      </div>
    </div>

    <!-- 添加或修改采购退货对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="退货单号" prop="returnOrderNo">
              <el-input v-model="form.returnOrderNo" placeholder="系统自动生成" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品ID" prop="productId">
              <el-input-number v-model.number="form.productId" :min="1" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商ID" prop="supplierId">
              <el-input-number v-model.number="form.supplierId" :min="1" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退货数量" prop="returnQuantity">
              <el-input-number v-model.number="form.returnQuantity" :min="1" :precision="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="退货金额" prop="returnAmount">
              <el-input-number v-model="form.returnAmount" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退货时间" prop="returnTime">
              <el-date-picker
                v-model="form.returnTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="仓库ID" prop="warehouseId">
              <el-input-number v-model.number="form.warehouseId" :min="1" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库存ID" prop="storageId">
              <el-input v-model="form.storageId" placeholder="请输入来源库存ID/编码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="退货原因" prop="returnReason">
          <el-select v-model="form.returnReason" placeholder="请选择退货原因" style="width: 100%">
            <el-option label="质量问题" value="质量问题" />
            <el-option label="数量不符" value="数量不符" />
            <el-option label="规格不符" value="规格不符" />
            <el-option label="损坏" value="损坏" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 处理退货对话框 -->
    <el-dialog title="处理退货" v-model="processOpen" width="600px" append-to-body>
      <el-form ref="processForm" :model="processForm" :rules="processRules" label-width="100px">
        <el-form-item label="处理结果" prop="processResult">
          <el-radio-group v-model="processForm.processResult">
            <el-radio label="1">同意退货</el-radio>
            <el-radio label="2">拒绝退货</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理意见" prop="processOpinion">
          <el-input v-model="processForm.processOpinion" type="textarea" placeholder="请输入处理意见" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitProcess">确 定</el-button>
        <el-button @click="cancelProcess">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPurchaseReturnPage,
  addPurchaseReturn,
  getPurchaseReturnDetail,
  updatePurchaseReturn,
  deletePurchaseReturn,
  exportPurchaseReturn
} from '@/api/purchase/PurchaseReturn.js'

export default {
  name: "PurchaseReturn",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 采购退货表格数据
      returnList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示处理弹出层
      processOpen: false,
      // 日期范围
      dateRange: [],
      // 退货状态字典
      returnStatusOptions: [
        { dictValue: '0', dictLabel: '待处理' },
        { dictValue: '1', dictLabel: '已同意' },
        { dictValue: '2', dictLabel: '已拒绝' },
        { dictValue: '3', dictLabel: '已完成' }
      ],
      // 全选开关
      selectAll: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: '',
        returnStatus: '',
      },
      // 表单参数
      form: {},
      // 处理表单参数
      processForm: {},
      // 表单校验
      rules: {
        productId: [
          { required: true, message: "产品ID不能为空", trigger: "blur" }
        ],
        supplierId: [
          { required: true, message: "供应商ID不能为空", trigger: "blur" }
        ],
        returnQuantity: [
          { required: true, message: "退货数量不能为空", trigger: "blur" },
          { type: 'number', min: 1, message: '退货数量必须大于0' }
        ],
        warehouseId: [
          { required: true, message: "仓库ID不能为空", trigger: "blur" }
        ],
        storageId: [
          { required: false, message: "", trigger: "blur" }
        ],
        returnTime: [
          { required: true, message: "退货时间不能为空", trigger: "change" }
        ]
      },
      // 处理表单校验
      processRules: {
        processResult: [
          { required: true, message: "请选择处理结果", trigger: "change" }
        ],
        processOpinion: [
          { required: true, message: "处理意见不能为空", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.returnList.length > 0 && this.returnList.every(item => item.selected);
      },
      set(value) {
        this.returnList.forEach(item => {
          item.selected = value;
        });
      }
    },
    totalPages() {
      return Math.ceil(this.total / this.queryParams.pageSize);
    }
  },
  created() {
    this.getList();
  },
  methods: {
    onPageChange(page) {
      const totalPages = Math.max(1, Math.ceil(this.total / this.queryParams.pageSize))
      const next = Math.min(Math.max(1, page), totalPages)
      if (next === this.queryParams.pageNum) return
      this.queryParams.pageNum = next
      this.getList()
    },
    onPageSizeChange() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    getStatusText(status) {
      // 将状态值转换为中文文字
      if (status === '0' || status === 0) return '待退货';
      if (status === '1' || status === 1) return '待寄出';
      if (status === '2' || status === 2) return '已寄出';
      if (status === '3' || status === 3) return '待收货';
      return status || '-';
    },
    getStatusClass(status) {
      // 根据数据库中的状态值设置样式
      if (status === '0' || status === 0) return 'status-pending';
      if (status === '1' || status === 1) return 'status-partial';
      if (status === '2' || status === 2) return 'status-full';
      if (status === '3' || status === 3) return 'status-completed';
      return 'status-default';
    },
    // 本地 parseTime，兼容字符串/时间戳/Date
    parseTime(val, fmt = '{y}-{m}-{d}') {
      if (!val) return ''
      let d
      if (typeof val === 'string') {
        if (/^\d{4}-\d{2}-\d{2}/.test(val)) {
          // 已经是 yyyy-MM-dd 或 yyyy-MM-dd HH:mm:ss
          return fmt === '{y}-{m}-{d}' ? val.substring(0, 10) : val
        }
        const n = Number(val)
        d = isNaN(n) ? new Date(val) : new Date(n)
      } else if (typeof val === 'number') {
        d = new Date(val)
      } else if (val instanceof Date) {
        d = val
      } else {
        return ''
      }
      const y = d.getFullYear()
      const m = (`0${d.getMonth() + 1}`).slice(-2)
      const day = (`0${d.getDate()}`).slice(-2)
      const h = (`0${d.getHours()}`).slice(-2)
      const i = (`0${d.getMinutes()}`).slice(-2)
      const s = (`0${d.getSeconds()}`).slice(-2)
      return fmt
        .replace('{y}', y)
        .replace('{m}', m)
        .replace('{d}', day)
        .replace('{h}', h)
        .replace('{i}', i)
        .replace('{s}', s)
    },
    formatAmount(v) {
      if (v === null || v === undefined || v === '') return '0.00'
      const num = Number(v)
      if (Number.isNaN(num)) return '0.00'
      return num.toFixed(2)
    },
    returnStatusText(val) {
      const found = (this.returnStatusOptions || []).find(i => i.dictValue === val)
      return found ? found.dictLabel : ''
    },
    getReturnStatusType(val) {
      const typeMap = {
        '0': 'warning',
        '1': 'success',
        '2': 'danger',
        '3': 'info'
      }
      return typeMap[val] || 'info'
    },
    /** 查询采购退货列表 */
    getList() {
      this.loading = true;
      this.returnList = [];

      // 处理查询参数
      const params = {
        current: this.queryParams.pageNum,
        size: this.queryParams.pageSize,
        // 关键词可以匹配多个字段
        productName: this.queryParams.keyword || undefined,
        productCode: this.queryParams.keyword || undefined,
        supplierCode: this.queryParams.keyword || undefined,
        returnStatus: this.queryParams.returnStatus || undefined,
      };

      getPurchaseReturnPage(params).then(response => {
        const payload = response?.data || response;
        const ok = payload?.code === 200 || payload?.success === true;
        const data = ok ? (payload.data ?? payload.result ?? payload.page ?? payload) : null;

        // 兼容多种分页结构
        const page = data?.records ? data
          : data?.page?.records ? data.page
          : data?.data?.records ? data.data
          : data;

        const records = page?.records || [];
        let total = page?.total;

        if (total === undefined || total === null) {
          total = page?.totalCount ?? page?.count;
        }

        // 若后端 total=0 但返回了数据，做兜底修正
        if ((total === 0 || total === '0') && Array.isArray(records) && records.length > 0) {
          total = records.length;
        }

        if (total === undefined || total === null) {
          total = Array.isArray(records) ? records.length : 0;
        }

        // 适配选中字段
        this.returnList = records.map(r => ({
          selected: false,
          ...r
        }));
        this.total = Number(total || 0);
      }).catch(error => {
        console.error('获取采购退货列表失败:', error);
        this.$message.error('获取数据失败，请稍后重试');
        this.returnList = [];
        this.total = 0;
      }).finally(() => {
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消处理
    cancelProcess() {
      this.processOpen = false;
      this.processForm = {};
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        returnOrderNo: undefined,
        productId: undefined,
        supplierId: undefined,
        returnQuantity: 1,
        returnStatus: '0',
        returnTime: undefined,
        remark: undefined
      };
      if (this.$refs && this.$refs.form && this.$refs.form.resetFields) {
        this.$refs.form.resetFields();
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        keyword: '',
        returnStatus: '',
      }
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加采购退货";
      // 退货单号由后端自动生成
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids[0];
      getPurchaseReturnDetail(id).then(response => {
        const payload = response?.data || response;
        const ok = payload?.code === 200 || payload?.success === true;
        const data = ok ? (payload.data ?? payload.result ?? payload) : null;
        this.form = data || { ...row };
        this.open = true;
        this.title = "修改采购退货";
      }).catch(error => {
        console.error('获取采购退货详情失败:', error);
        this.$message.error('获取详情失败');
        // 使用行数据作为备选
        this.form = { ...row };
        this.open = true;
        this.title = "修改采购退货";
      });
    },
    /** 详情按钮操作 */
    handleDetail(row) {
      const id = row.id;
      getPurchaseReturnDetail(id).then(response => {
        const payload = response?.data || response;
        const ok = payload?.code === 200 || payload?.success === true;
        const data = ok ? (payload.data ?? payload.result ?? payload) : null;

        // 显示详情信息
        this.$alert(`
          <div style="text-align: left;">
            <p><strong>退货单号：</strong>${data?.returnOrderNo || '-'}</p>
            <p><strong>产品名称：</strong>${data?.productName || '-'}</p>
            <p><strong>产品编号：</strong>${data?.productCode || '-'}</p>
            <p><strong>供应商：</strong>${data?.supplierName || '-'}</p>
            <p><strong>退货数量：</strong>${data?.returnQuantity || 0}</p>
            <p><strong>退货状态：</strong>${this.getStatusText(data?.returnStatus)}</p>
            <p><strong>退货时间：</strong>${this.parseTime(data?.returnTime)}</p>
            <p><strong>仓库：</strong>${data?.warehouseName || '-'}</p>
            <p><strong>备注：</strong>${data?.remark || '-'}</p>
          </div>
        `, '采购退货详情', {
          dangerouslyUseHTMLString: true,
          confirmButtonText: '确定'
        });
      }).catch(error => {
        console.error('获取采购退货详情失败:', error);
        this.$message.error('获取详情失败');
      });
    },
    /** 处理按钮操作 */
    handleProcess(row) {
      this.processForm = {
        id: row.id,
        processResult: '',
        processOpinion: ''
      };
      this.processOpen = true;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const payload = {
            id: this.form.id,
            returnStatus: this.form.returnStatus,
            returnTime: this.form.returnTime,
            uId: this.form.uId || 1,
            returnQuantity: this.form.returnQuantity,
            storageId: this.form.storageId,
            productId: this.form.productId,
            supplierId: this.form.supplierId,
            warehouseId: this.form.warehouseId,
            remark: this.form.remark
          }
          const apiCall = this.form.id ? updatePurchaseReturn(payload) : addPurchaseReturn(payload);
          apiCall.then(response => {
            const payload = response?.data || response;
            const ok = payload?.code === 200 || payload?.success === true;
            if (ok) {
              this.$message.success(this.form.id ? "修改成功" : "新增成功");
              this.open = false;
              this.getList();
            } else {
              this.$message.error(payload?.message || payload?.msg || "操作失败");
            }
          }).catch(error => {
            console.error('提交表单失败:', error);
            this.$message.error("操作失败，请稍后重试");
          });
        }
      });
    },
    /** 提交处理 */
    submitProcess() {
      this.$refs["processForm"].validate(valid => {
        if (valid) {
          this.$message.success("处理成功");
          this.processOpen = false;
          this.getList();
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row?.id ? [row.id] : this.ids
      if (!ids || ids.length === 0) return

      this.$modal.confirm('是否确认删除所选采购退货记录？').then(() => {
        const deletePromises = ids.map(id => deletePurchaseReturn(id));
        Promise.all(deletePromises).then(responses => {
          const allSuccess = responses.every(response => {
            const payload = response?.data || response;
            return payload?.code === 200 || payload?.success === true;
          });

          if (allSuccess) {
            this.$message.success('删除成功');
            this.getList();
          } else {
            this.$message.error('部分删除失败');
          }
        }).catch(error => {
          console.error('删除失败:', error);
          this.$message.error('删除失败，请稍后重试');
        });
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$modal.confirm('是否确认导出采购退货数据？').then(() => {
        this.exportLoading = true;

        // 处理日期范围
        const params = { ...this.queryParams };
        if (this.dateRange && this.dateRange.length === 2) {
          params.returnStartTime = this.dateRange[0];
          params.returnEndTime = this.dateRange[1];
        }

        exportPurchaseReturn(params).then(response => {
          this.$message.success('导出成功');
        }).catch(error => {
          console.error('导出失败:', error);
          this.$message.error('导出失败，请稍后重试');
        }).finally(() => {
          this.exportLoading = false;
        });
      }).catch(() => {});
    }
  }
};
</script>

<style scoped>
.purchase-return-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.filter-section {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-size: 14px;
}

.filter-item input,
.filter-item select {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 200px;
}

.filter-buttons {
  margin-left: auto;
}

.btn-primary {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 10px;
}

.table-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

th {
  background-color: #f8f9fa;
}

.link-style {
  color: #409eff;
  cursor: pointer;
}

.footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.pagination select {
  padding: 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.status-pending {
  color: #e6a23c;
}

.status-partial {
  color: #409eff;
}

.status-full {
  color: #67c23a;
}

.status-completed {
  color: #909399;
}

.status-default {
  color: #606266;
}

/* 对话框样式 */
.el-dialog {
  border-radius: 8px;
}

.el-dialog :deep(.el-dialog__header) {
  background: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  padding: 20px 20px 16px;
}

.el-dialog :deep(.el-dialog__title) {
  font-weight: 600;
  color: #303133;
}

.el-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.el-dialog :deep(.el-dialog__footer) {
  padding: 16px 20px 20px;
  border-top: 1px solid #ebeef5;
}

/* 表单样式 */
.el-form :deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

.el-input :deep(.el-input__inner),
.el-select :deep(.el-input__inner),
.el-textarea :deep(.el-textarea__inner) {
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
}

.el-input :deep(.el-input__inner):focus,
.el-select :deep(.el-input__inner):focus,
.el-textarea :deep(.el-textarea__inner):focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 按钮样式 */
.el-button {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s;
}

.el-button--primary {
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border: none;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.el-button--primary:hover {
  background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  transform: translateY(-1px);
}

.el-button--small {
  padding: 8px 16px;
  font-size: 13px;
}

/* 加载状态 */
.el-loading-mask {
  border-radius: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .purchase-return-container {
    padding: 12px;
  }

  .filter-section {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-item {
    margin-bottom: 16px;
  }

  .filter-item input,
  .filter-item select {
    width: 100%;
  }

  .footer-section {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .pagination {
    justify-content: center;
  }
}

</style>
